<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04 goodslist_范围判断</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .sx{
            width: 80%;
            margin: 20px auto;
        }
        .fl{
            width: 80%;
            margin: 20px auto;
        }
        .ss{
            width: 80%;
            margin: 20px auto;
        }
        .fwpd{
            width: 80%;
            margin: 20px auto;
        }
        .content{
            width: 80%;
            margin: 0 auto;
        }
        .content .item{
            width: 250px;
            height: 300px;
            float: left;
            margin-left: 30px;
        }
        .content .item img{
            width: 250px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="ss">
            <p>
                搜索
                <input type="text" v-model="key" placeholder="输入内容搜索">
            </p>
        </div>
        <div class="fl">
            <p>
                分类：
            全部 <input type="radio" name="type" value=""  v-model="type">
            服装 <input type="radio" name="type" value="1" v-model="type">
            手机 <input type="radio" name="type" value="2" v-model="type">
            箱包 <input type="radio" name="type" value="3" v-model="type">
            美妆 <input type="radio" name="type" value="4" v-model="type">
        </p>
        </div>
        <div class="sx">
            排序字段：
            <label>id</label><input type="radio" name="sort" value="id" v-model="sort">
            <label>价格</label><input type="radio" name="sort"  value="goosprice" v-model="sort">
        </div>
        <div class="sx">
            排序方式：
            <label for="">升序</label><input type="radio" name="order" value="asc" v-model="order">
            <label for="">降序</label><input type="radio" name="order" value="desc" v-model="order">
        </div>
        <!-- 价格区间 -->
        <div class="fwpd">
            价格区间：  
            <p>
                从<input type="text" v-model="start">到<input type="text" v-model="end">的区间
            </p>
        </div>
        <div class="content">
            <div class="item" v-for="item in list" :key="item.id" @click="gotoDetail(item.id)">

                <img :src="item.goodsimg" alt="">
                <p class="goodsname">商品名称：{{item.goodsname}}</p>
                <p class="goodsprice">商品价格: {{item.goodsprice}}</p>

            </div>
            <!-- <div class="item">

                <img src="" alt="">
                <p class="goodsname">商品一</p>
                <p class="goodsprice">商品价格</p>

            </div>
            <div class="item">

                <img src="" alt="">
                <p class="goodsname">商品一</p>
                <p class="goodsprice">商品价格</p>

            </div> -->
        </div>
        
    </div>
    
</body>
<script>

    new Vue({
        el:"#app",
        data:{
            list:[],
            sort:"id",
            order:"desc",
            type:"",
            key:"",
            timer:null,
            start:"",
            end:"",

        },
        created(){
            this.search();
        },
        methods:{
            gotoDetail(id){
                window.location.href="./detail.html?id="+id;
            },

            async search(){

                let params = {
                    _sort:this.sort,
                    _order:this.order,
                    q:this.key,

                }

                if(this.type){
                    params.type = this.type;
                }


                if(this.start){
                    params.goodsprice_gte = this.start;
                }

                if(this.end){
                    params.goodsprice_lte = this.end;
                }

                
                let {data:list} =  await axios({
                    mothed:"get",
                    url:"http://localhost:2345/goodslist",
                    params
                });

                this.list = list;
                // console.log(list);
            },

        },
        watch:{
            sort(){
                this.search();
            },
            order(){
                this.search();
            },
            type(){
                this.search();
            },
            key(){
                clearTimeout(this.timer);
                this.timer =  setTimeout(() => {
                    this.search();
                },2000)
            },
            start(){
                clearTimeout(this.timer);
                this.timer =  setTimeout(() => {
                    this.search();
                },2000)
            },
            end(){
                clearTimeout(this.timer);
                this.timer =  setTimeout(() => {
                    this.search();
                },2000)
            }
        }      
    })
</script>
</html>